<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:cote="http://java.sun.com/jsf/composite/componentes">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">  

            <h:form id="formArticulo">

                <p:panel header="Ver Articulo" style="width: 80%;margin: 0px auto;position: ">

                    <p:panelGrid style="width: 90%;margin: 10px auto;margin: 0px auto;" id="verArticulo"> 
                        <p:row>
                            <p:column>
                                <h:outputText value="CATEGORIA : "  />  
                            </p:column>
                            <p:column>
                                <h:outputText style="font-weight: bold" value="#{BKArticulo.articuloFormulario.idCategoriaArticulo.nombre}" />
                            </p:column>
                            
                        </p:row>

                        <p:row>
                            <!--<p:column>
                                <h:outputText id="lblDescripcion" value="DESCRIPCION(*)"/>
                            </p:column>
                            <p:column>
                                <h:outputText id="txtDescripcion" style="font-weight: bold"  value="#{BKArticulo.articuloFormulario.descripcion}" />
                            </p:column>-->
                            <p:column>
                                <h:outputText id="lblNombreComercial" value="NOMBRE COMERCIAL : " />
                            </p:column>
                            <p:column colspan="3">
                                <h:outputText value="#{BKArticulo.articuloFormulario.nombreComercial}" id="txtNombreComercial"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText id="txtModelos" value="MODELO : "/>
                            </p:column>
                            <p:column colspan="3">
                                <h:outputText style="font-weight: bold;" value="#{BKArticulo.articuloFormulario.modelo}"/>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText id="txtDetalle" value="DETALLE : "/>
                            </p:column>
                            <p:column colspan="3">
                                <h:outputText style="font-weight: bold" 
                                              value="#{BKArticulo.articuloFormulario.detalle}"/>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <h:outputText id="lblDatosTecnicos" value="DATOS TÉCNICOS : "/>
                            </p:column>
                            <p:column colspan="3">
                                <h:outputText id="txtDatosTecnicos" style="font-weight: bold" 
                                             value="#{BKArticulo.articuloFormulario.datosTecnicos}"/>

                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="4">
                                <p:outputPanel id="pnlCategoriaCompuesta" layout="block" style="margin: 15px 0" >
                                    <p:fieldset id="fstComposicionArticulo" legend="Composiciòn Articulo" >
                                        <p:dataTable id="dataTablaArticulo" var="articulo" value="#{BKComposicionArticulo.listaArticulo}" widgetVar="carsTable"
                                                     emptyMessage="No se encontraron articulos" rowIndexVar="rowIndex" >


                                            <p:column id="idColumnaNum" style="width: 5%" headerText="Num.">
                                                <h:outputText value="#{rowIndex+1}" />
                                            </p:column>

                                            <p:column id="idColumnaCategoria" headerText="CATEGORIA">
                                                <h:outputText value="#{articulo.idArticuloComp.idCategoriaArticulo.nombre}" />  
                                            </p:column>

                                            <p:column id="idColumnaNombre" headerText="ARTICULO">
                                                <h:outputText value="#{articulo.idArticuloComp.nombreComercial}" />  
                                            </p:column>

                                            <p:column id="idColumnaPrecio" headerText="CANTIDAD">

                                                <h:outputText value="#{articulo.cantidad}" />
                                                <h:outputText value="#{articulo.tipo}" />  

                                            </p:column>

                                        </p:dataTable>   
                                    </p:fieldset>

                                </p:outputPanel>
                            </p:column>
                        </p:row>

                    </p:panelGrid>    

                    <h:panelGrid columns="2" style="width: 300px;margin: 0px auto;">
                        <p:commandButton action="#{MBArticulo.cancelar()}" ajax="false" immediate="true" value="Volver"/>
                        <p:commandButton  value="Imprimir" type="button" icon="ui-icon-print">  
                            <p:printer target="verArticulo" />    
                        </p:commandButton >
                    </h:panelGrid> 

                </p:panel>

            </h:form>

        </ui:define>
    </ui:composition>
</html>   